<template>
    <v-main
        class="d-flex-center"
        style="min-height: 300px"
    >
        <div
            class="w-100 h-screen d-flex-center"
            style="background-color: rgb(0, 0, 0)"
        >
            <!-- <Introduce
                color="white"
                intro="Free you from coding, just do it like designing UI!"
            >
                No Code:Relief
            </Introduce> -->
            <div class="w-50 h-50 d-flex-center">
                <img
                    style="width: 100%"
                    src="../../assets/title.webp"
                    alt=""
                />
            </div>
        </div>
        <div
            class="w-100 h-50 d-flex-center"
            style="background-color: rgb(207, 207, 207)"
        >
            <Introduce intro="Introduction"
                ><em style="text-align: center; font-size: 1.5em">
                    No-code means being able to quickly develop business
                    applications without writing code
                </em></Introduce
            >
            <div
                class="w-50 h-75 d-flex-center"
                style="margin: 2em"
            >
                <img
                    class="sample-img"
                    src="../../assets/sample4.png"
                    alt=""
                />
            </div>
        </div>
        <div
            class="w-100 h-screen d-flex-center"
            style="background-color: rgb(255, 255, 255)"
        >
            <Introduce intro="No Code">
                <ul style="padding-left: 2em; font-size: 1.5em">
                    <li><em>Free you from coding!</em></li>
                    <li><em>Just do it like designing UI!</em></li>
                </ul>
            </Introduce>
            <!-- <Introduce
                color="white"
                intro="Free you from coding, just do it like designing UI!"
            >
                No Code:Relief
            </Introduce> -->
            <div
                class="w-50 h-75 d-flex-center"
                style="margin: 2em"
            >
                <img
                    class="sample-img"
                    style="left: -5%; top: 0"
                    src="../../assets/sample1.png"
                    alt=""
                />
                <img
                    class="sample-img"
                    style="right: -5%; bottom: 0"
                    src="../../assets/sample2.png"
                    alt=""
                />
            </div>
        </div>
        <div
            class="w-100 h-50 d-flex-center"
            style="background-color: rgb(207, 207, 207)"
        >
            <div
                class="w-50 h-75 d-flex-center"
                style="margin: 2em"
            >
                <img
                    class="sample-img"
                    src="../../assets/sample3.jpg"
                    alt=""
                />
            </div>
            <Introduce intro="">
                <em style="font-size: 1.5em">
                    Build your app quickly without writing a single line of
                    code!"
                </em>
            </Introduce>
        </div>
        <div class="w-100 h-25 d-flex-center">
            <div class="h-75 d-flex-center">
                <h1 style="padding: 0 2em">Can hardly wait?</h1>
            </div>
            <v-btn
                append-icon="mdi-arrow-right-thick"
                variant="tonal"
                size="x-large"
                @click="toLogin"
            >
                Click To Start
            </v-btn>
        </div>
        <Footer></Footer>
    </v-main>
</template>
<script setup>
import Introduce from './components/Introduce.vue'
import Footer from '@/components/Footer.vue'

import { useRouter } from 'vue-router'

const router = useRouter()

function toLogin() {
    router.push({
        name: 'login'
    })
}
</script>
<style>
.sample-img {
    position: absolute;
    width: 90%;
    border-radius: 5px;
    box-shadow: -2px 2px 10px 4px grey;
}
</style>
